這禮拜與老師討論過專題後，決定用react 去寫前端。所以在剩下的天數裡，我決定來從頭學習react ，之後會在網頁上實作上去，所以今天就來了解react 的基本知識與用法！

事前準備

先準備好需要的工具

1. Node.js LTS：裝好就會有 npm
2. VS Code（寫程式）
3. Chrome（看網頁）

Npm是什麼呢

可以幫我下載、更新、移除的功能，可以幫我執行常用命令。

想像在 App Store 下載一個 App，按「下載」之後可以一次把別人做好的功能放入到我的專案。

• 一個平台＋一個工具

  • Registry平台：裡面放著許多套件（react、vite）
  • CLI指令工具：終端機的 npm install、npm run

• 跟 React有什麼關係呢？

  因為不管是 React、Vite、開發用的工具都透過 npm 安裝和管理

Step 0：安裝環境

• 到 nodes.org 安裝 LTS 版本
• 到終端機，確認：（兩個都有版本號就ＯＫ）

node -v
npm -v

Step 1：建立 React 專案（vite）

• 在專案資料夾

  npm create vite@latest my-react-app -- --template react
  cd my-react-app
  npm install
  npm run dev
  

• 終端機會顯示一個本機網址，瀏覽器打開就能看到的起始頁

Step 2：React 三個重要概念

1. JSX：在 JS 裡寫像是 HTML 的東西
2. 元件（Component）：一個個小積木（按鈕、卡片、整個區塊…）
3. 狀態（State）：會改變的資料（像計數器數字、表單內容）

Step 3：React 常用到的

• function Component() → 定義元件
• useState → 存放資料（像 consultations）
• useEffect → 做初始化（像從 localStorage 抓資料）
• props → 元件之間傳遞資料
• map → 迭代渲染（顯示多個問題）

通常會搭配 Tailwind CSS 美化 UI，換 Tailwind 只是語法不同

1. function Component() → 定義元件

• 像寫一個 HTML + JS 的組合，React 叫做「元件」
• 元件就是一個小小的積木，網頁就是很多積木組起來

function Hello() {
  return <h1>哈囉，我是 React!</h1>;
}

2. useState → 存放資料

• 在 JS 裡面，用 let consultations = [] 來存資料
• 在 React 裡，要讓畫面「隨著資料改變自動更新」，就用 useState

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // count = 值, setCount = 更新它

  return (
    <div>
      <p>現在數字是：{count}</p>
      <button onClick={() => setCount(count + 1)}>加一</button>
    </div>
  );
}

3. useEffect → 初始化 / 副作用

• 在 JS 裡會在 window.onload 或 DOMContentLoaded 時候跑一些程式。
• 在 React，用 useEffect。

import { useEffect } from "react";

function App() {
  useEffect(() => {
    console.log("網頁載入完成，去 localStorage 抓資料！");
  }, []); // [] 代表只在一開始執行一次

  return <div>我的網站</div>;
}

4. props → 元件之間傳遞資料

• JS 裡寫函式要傳參數
• 在 React，元件之間傳資料也用「props」

function Question(props: { text: string }) {
  return <div>❓ {props.text}</div>;
}

function App() {
  return (
    <div>
      <Question text="糖尿病要怎麼飲食？" />
      <Question text="血糖機怎麼用？" />
    </div>
  );
}

→ 畫面會顯示兩個問題。

5. map → 迭代渲染

• 在 JS 裡，用 forEach 或 map 來跑資料。
• 在 React，通常用 map 直接生出很多元件。

const consultations = [
  { id: 1, question: "糖尿病要怎麼飲食？" },
  { id: 2, question: "血糖機怎麼用？" },
];

function App() {
  return (
    <div>
      {consultations.map(c => (
        <div key={c.id}>❓ {c.question}</div>
      ))}
    </div>
  );
}

→ React 會幫你一次渲染出所有問題。

目前加入專案的想法

剛好用得到，又能練 React 基本功的功能：

• 最新諮詢 / 問答元件
  • 用 useState 管理問題清單。
  • 用 map 顯示最新三則。
  • 送出問題時，用 setState 更新 + 存到 localStorage。
• 修改密碼表單元件
  • 學會在 React 處理表單輸入值（onChange、useState）。
  • 驗證舊密碼 & 更新 localStorage。
• 藥物提醒清單
  • 用 React state 存「提醒事項」。
  • 學 useEffect 監聽時間，做提醒（或先顯示在列表就好）。

最後再用 Tailwind 美化看看。

參考資料

https://ithelp.ithome.com.tw/articles/10214942?sc=hot
https://developer.mozilla.org/zh-TW/docs/Learn_web_development/Core/Frameworks_libraries/React_getting_started
https://kucw.io/blog/restful-api/